<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>root</legend>
        <p>{{ count }}</p>
        <button @click="incrementRoot">+</button>
        <button @click="decrementRoot">-</button>
        </p>
    </fieldset>
    <fieldset>
        <legend>moduleA</legend>
        <p>{{ countA }}</p>
        <p>
            <button @click="incrementAsyncA">++</button>
            <button @click="incrementA">+</button>
            <button @click="decrementA">-</button>
            <button @click="decrementAsyncA">--</button>
            <button @click="tongming">同名</button>
        </p>
    </fieldset>
    <fieldset>
        <legend>moduleB</legend>
        <p>{{ countB }}</p>
        <p>
            <!--<button @click="incrementAsyncB">++</button>-->
            <button @click="incrementB">+</button>
            <button @click="decrementB">-</button>
            <!--<button @click="decrementAsyncB">&#45;&#45;</button>-->
        </p>
    </fieldset>
</div>

<script>
    /**
     * 强命名空间（增加namespace属性），会限定getters mutation action使用mutation action等需要加命名空间
     * 若命名空间（不加namespace属性），使用mutation action等不需要加命名空间，但是每个模块下同名的会全部执行
     */

    // Vue.use(Vuex)

    var store = new Vuex.Store({
        strict: true, //严格模式，生产环境不建议使用
        modules: {
            moduleA: {
                // namespaced: true,
                state: {
                    count: 0
                },
                getters : {
                    ss (state, getters, rootState, rootGetters){

                    }
                },
                mutations: {
                    incrementA(state, num) {
                        return state.count = state.count + num;
                    },
                    decrementA: state => state.count--,
                    tongming : state => state.count++
                },
                actions: {
                    incrementAsyncA({dispatch, commit, getters, rootGetters}) {
                        setTimeout(() => {
                            commit('increment', null, {root: true})
                            commit('incrementA', 20)
                        }, 1000)
                    },
                    decrementAsyncA({commit}) {
                        return new Promise((resolve, reject) => {
                            setTimeout(() => {
                                commit('decrementA')
                                resolve()
                            }, 1000)
                        })
                    }
                }
            },
            moduleB: {
                //namespaced: true,
                state: {
                    count: 0
                },
                mutations: {
                    incrementB(state, num) {
                        console.log('moduleB---', state);
                        return state.count = state.count + num;
                    },
                    decrementB: state => state.count--,
                    tongming : state => state.count++
                }
            }
        },
        //root
        state: {
            count: 0
        },
        mutations: {
            increment(state) {
                console.log('root---', state.count);
                return state.count++;
            },
            decrement(state) {
                return state.count--;
            }
        }
    })

    new Vue({
        el: '#app',
        store,
        computed: {
            count() {
                return this.$store.state.count
            },
            countA() {
                return this.$store.state.moduleA.count
            },
            countB() {
                return this.$store.state.moduleB.count
            }
        },
        methods: {
            tongming (){
                this.$store.commit('tongming')
            },
            incrementA() {
                this.$store.commit("incrementA", 10)
            },
            decrementA() {
                this.$store.commit({type: "decrementA"})
            },
            incrementB() {
                this.$store.commit("incrementB", 10)
            },
            decrementB() {
                this.$store.commit({type: "decrementB"})
            },
            incrementRoot() {
                this.$store.commit({type: "increment"})
            },
            decrementRoot() {
                this.$store.commit({type: "decrement"}, null, {root: true})
            },
            incrementAsyncA() {
                this.$store.dispatch('incrementAsyncA')
            },
            decrementAsyncA() {
                this.$store.dispatch('decrementAsyncA').then((res) => {
                    console.log('chenggong')
                })
            },
            //取别名
            // ...mapActions({
            //     'incrementAsyncqq': 'incrementAsync',
            // }),
            // ...mapActions([
            //     'incrementAsync'
            // ]),
            //带命名空间的
            // ...mapActions('namespace', {
            //     'incrementAsyncqq': 'incrementAsync',
            // }),
            // ...mapActions('namespace', [
            //     'incrementAsync'
            // ])
        }
    })
</script>
</body>
</html>
